<script setup lang="ts">
import { ref, onMounted } from "vue";
import { payStore } from "@/stores/frontData/he/pay";
import { goPay } from "@/api/student/he/pay";
import { getHMS } from "@/utils/time";
import router from "@/router";
import { useRoute } from "vue-router";

const pay = payStore();
const route = useRoute();
onMounted(() => {
  if (route.query.code != undefined) {
    console.log(222);

    goPay(route.query.code).then((res: any) => {
      if (res.data.msg == "请求成功") {
        pay.order(res.data.data);
      }
    });
  }
  setTimeout(() => {
    router.push("/allorders");
  }, 1000 * 60 * 5);
});
</script>
<template>
  <div class="result">
    <div class="resultOrder">
      <div>
        <div class="top">
          <!-- 上部 -->
          <div>
            <p>
              商品订单号：<span>{{ pay.info[0].code }}</span>
            </p>
            <div class="Moneylist">
              <div>
                支付金额:<span class="money">￥{{ pay.info[0].amount }}</span>
              </div>
              <div>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    订单详情
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        >商品名称：{{ pay.info[0].className }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        >支付订单：{{ pay.info[0].code }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        >应付金额：￥{{ pay.info[0].amount }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        >购买时间：{{
                          getHMS(pay.info[0].ordersTime)
                        }}签</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div><span>？问题指引</span></div>
        </div>
        <!-- 下部 -->
        <div class="buttom">
          <p>支付方式:</p>

          <template v-if="pay.info[0].payType == 1">
            <el-button type="success">微信支付</el-button>
          </template>
          <template v-if="pay.info[0].payType == `2`">
            <el-button type="primary">支付宝支付</el-button>
          </template>
          <div>
            <el-image
              style="width: 200px; height: 200px"
              :src="pay.info[0].qrCode"
              fit="fit"
            />
          </div>
        </div>
        <!-- <div class="last">
          <div>
            <el-checkbox
              v-model="checked5"
              label="同意在线课堂服务协议"
              size="small"
            />
          </div>
          <div><el-button type="primary">立即下单</el-button></div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<style>
.result {
  background-color: #f4f4f4;
  width: 100%;
  /* height: 100vh; */
}
.resultOrder {
  width: 60%;
  background-color: white;
  height: 500px;
  margin: auto;
}
.resultOrder > div:first-child {
  width: 80%;
  margin: auto;
}
.Moneylist {
  display: flex;
  justify-content: space-between;
}
.top {
  display: flex;
  justify-content: space-between;
}
.top > div:first-child {
  width: 60%;
}
.top > div:nth-child(2) {
  display: flex;
  align-items: center;
}
ul {
  border: 0;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.buttom {
  margin: 50px 0px;
}

.last {
  display: flex;
  justify-content: space-between;
}
</style>
